<template>
	<div class="detail4">
		<h2 class="tit">诊间处方支付详情</h2>
		<div class="main">
			<p class="title">处方信息</p>
			<Row class="box">					
				<Col span="8">
					<div class="address">						
						<span class="s1">处方序号:</span>
						<span>{{pres.thirdpartyId}}</span>					
					</div>
					<div class="address">					
						<span class="s1">院内订单编号:</span>
						<span>{{pres.advanceOrderId}}</span>			
					</div>
					<div class="address">						
						<span class="s1">状态:</span>
						<span>{{statusForName(pres.reipsStatus)}}</span>					
					</div>
				</Col>  
				<Col span="8">
					<div class="address">						
						<span class="s1">处方类型:</span>
						<span>{{prescTypeForName(pres.prescType)}}</span>
					</div>				
					<div class="address">						
						<span class="s1">开方日期:</span>
						<span>{{pres.openDate}}</span>
					</div>
					<div class="address">
						<span class="s1">开方科室:</span>
						<span>{{pres.department}}</span>				
					</div>
				</Col>
				<Col span="8">
					<div class="address">						
						<span class="s1">开放医生:</span>
						<span>{{pres.prescDoctor}}</span>		
					</div>
					<div class="address">					
						<span class="s1">执行科室:</span>
						<span>{{pres.execDept}}</span>				
					</div>
					<div class="address">				
						<span class="s1">患者姓名:</span>
						<span>{{pres.memberName}}</span>	
					</div>
				</Col>
			</Row>
		</div>
		<div class="main">
			<p class="title">处方明细信息</p>
			<Table
        style="margin: 0 20px 20px;"
        stripe
        :columns="columns"
        :data="pres.details"
      ></Table>
		</div>
		<div class="main">
			<p class="title">订单信息</p>
			<Row class="box">					
				<Col span="8">
					<div class="address">
						<span class="s1">订单状态:</span>
						<span>{{["待付款", "已付款", "已取消", "已退款", "支付中", "支付失败", "退款中", "部分退款"][info.orderStatus]}}</span>		
					</div>
					<div class="address" v-if="info.orderNumber">			
						<span class="s1">订单编号:</span>
						<span>{{info.orderNumber}}</span>
					</div>
				</Col>
				<Col span="8">
					<div class="address">
						<span class="s1">订单金额:</span>
						<span>{{info.amt}}</span>	
					</div>
					<div class="address">
						<span class="s1">三方平台业务单号:</span>
						<span>{{info.transactionId}}</span>
					</div>
				</Col>
				<Col span="8"  v-if="info.createTime">
					<div class="address">
						<span class="s1">订单时间:</span>
						<span>{{info.createTime}}</span>	
					</div>
				</Col>
				<Col span="8"  v-if="info.notifyTime">
					<div class="address">
						<span class="s1">支付完成时间:</span>
						<span>{{info.notifyTime}}</span>	
					</div>
				</Col>
			</Row>
		</div>
		<div class="btn-group">
			<feeBackBtn :id="$route.query.id" :feeBackInfo="{
			refundAmt: info.refundAmt,
			refundTradingChannels: info.refundTradingChannels,
			refundOrderStatus: info.refundOrderStatus}" />
			<Button @click="handleBack">
				<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
			</Button>
		</div>
	</div>
</template>

<script>
import feeBackBtn from './components/feeBackBtn';
import api from "@/api/commonApi";
export default {
	name: 'orderPrescription',
	components: {
		feeBackBtn
	},
	data() {
		return {
			info: {},
			pres: {},
			columns: [
				{key: "itemName", title: "缴费名称", align: "center"},
				{key: "itemNumber", title: "缴费名称", align: "center"},
				{key: "unitPrice", title: "缴费数量", align: "center"},
				{key: "itemUnit", title: "缴费总价", align: "center"},
				{key: "itemAmt", title: "缴费单价", align: "center"}
			],
			statusList: [
		        {dictName: "已缴费", dictValue: 1},
		        {dictName: "已过期", dictValue: 2},
		        {dictName: "已退费", dictValue: 3},
		    ],
		    prescTypeList: [
		        {dictName: "西药处方", dictValue: 1},
		        {dictName: "中药处方", dictValue: 2},
		        {dictName: "草药处方", dictValue: 3},
		        {dictName: "治疗处方", dictValue: 4},
		        {dictName: "医技处方", dictValue: 5},
		        {dictName: "体检处方", dictValue: 6},
		        {dictName: "挂号收费", dictValue: 7},
		    ],	
		}
	},
	mounted() {
		this.orderPrescription();
		this.orderDetail();
	},
	methods: {
		orderPrescription() {
			this.$axios.get(api.orderPrescription + '/' + this.$route.query.orderId).then(resp => {
				this.pres = resp.data.object;
			}).catch(err => {
			});
		},
		orderDetail() {
			this.$axios.get(api.orderById + '/' + this.$route.query.orderId).then(resp => {
				this.info = resp.data.object;
			}).catch(err => {
			});
		},
		statusForName(code) {
			return (
              this.statusList.filter(
                (item) =>
                  item.dictValue == code
              )[0] || {}
            ).dictName;
		},
		prescTypeForName(code) {
			return (
              this.prescTypeList.filter(
                (item) =>
                  item.dictValue == code
              )[0] || {}
            ).dictName;
		},
		handleBack() {
			this.$router.go(-1);
		},
	}
}
</script>

<style scoped lang="less">
.detail4 {
	width: calc(100%);
	padding: 10px 0px;
	margin: 0 auto;
	background: #fff;
	.tit {
		margin:10px 0;
		font-weight:bold;
		text-align:center;
	}	
	.main {
		width: 98%;
		display: flex;
		flex-direction: column;
		margin: 10px auto;
		border: 1px solid #f0f0f0;
		box-shadow: 0 4px 3px #ebedf8;
		border-radius: 5px;
		margin-bottom: 20px;
		.title {
			font-size: 20px;
			padding-left: 15px;
			margin-bottom: 20px;
			color: #333;
			height: 40px;
			line-height: 40px;
			background: #ebedf8;         
    	}
		.box{
			padding: 0 40px;
		}
		.address {
			display: flex;
			flex-direction: row;    
			.s1 {
				min-width: 80px;
				margin-right: 10px;
				margin-bottom: 15px;
			}
		}
	}
	.btn-group {
		margin-top: 20px;
		text-align: center;
		margin-bottom: 10px;
	}
}
</style>